<template>
  <div>
    <div id="search-options">
        <el-form size="small" :inline="true">
          <el-form-item label="创建日期开始：">
            <el-date-picker type="date" format="yyyy-MM-dd"  v-model="searchForm.beginDate" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="创建日期结束：">
            <el-date-picker type="date" format="yyyy-MM-dd"  v-model="searchForm.endDate" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="ip地址：">
            <el-input  v-model="searchForm.ip" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button id="query-btn" size="small" plain icon="el-icon-search" type="primary" @click="searchData">查询</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div style="margin-left:20px;margin-right:20px;">
        <el-table id="data-table" :data="dayVisitList" style="width: 100%" border :highlight-current-row="true" stripe>
            <el-table-column prop="id" label="id" align="center"></el-table-column>
            <el-table-column prop="ip" label="ip地址" align="center"></el-table-column>
            <el-table-column prop="location" label="地点" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="searchForm.page.pageNum" :page-sizes="[10]" :page-size="10" :total="common.page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
        dayVisitList: [{
            id: null,
            location: '',
            ip: '',
            createTime: ''
        }],
        searchForm: {
            ip: '',
            beginDate: '',
            endDate: '',
            page: {
                pageNum: 1,
                pageSize: 10
            }
        },
    }
  },
  methods: {
      handleSizeChange (pageSize) {
        this.searchForm.page.pageSize = pageSize
        this.loadData()
      },
      handleCurrentChange (pageNum) {
        this.searchForm.page.pageNum = pageNum
        this.loadData()
      },
      loadData () {
          let vm = this
        //   vm.searchForm.page = vm.common.pageQuery
          vm.$http.post('api/dayVisit/find',vm.searchForm).then(res => {
            // console.log(res)
            if (res.data.code === 0){
              //console.log(res.data.data)
              vm.dayVisitList = res.data.data.records
              vm.common.page.total = res.data.data.total
            }
            else {
              vm.$message.error(res.data.msg)
            }
          })
      },
      searchData () {
          let vm = this
          vm.searchForm.page.pageNum = 1
          vm.loadData()
      }
  },
  mounted() {
    let vm = this
    vm.loadData()
  }
}
</script>
